@import (reference) 'config';
@import (reference) '../../../app/less/typography';
@import (reference) 'icons';

.create-order {
  .expiration {
    display: flex;
    justify-content: space-between;
    margin: 7px 0;

    &__item {
      display: flex;
      flex: 1 0;
      max-width: 50%;
      white-space: nowrap;
      align-items: center;
      position: relative;
      font-size: @font-size-caption-2;

      &-acting {
        justify-content: flex-end;
      }
    }

    &__label {
      color: @color-basic-500;
      max-width: 50%;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    &__value {
      margin-left: 5px;
    }

    .select {
      position: static;

      .title {
        padding: 2px 15px 2px 5px;
        border: 1px solid transparent;
        font-size: @font-size-caption-2;

        &::after {
          right: 0;
          background-image: @select-arrow-icon;
          background-repeat: no-repeat;
          background-size: 90%;
        }
      }

      .select-list {
        box-shadow: @dropdown-shadow;
        border: 0;
        border-radius: 4px;
        padding: 5px 0;
        width: auto;

        w-option {
          .option {
            display: block;
            text-align: right;
            overflow: hidden;
            width: 100%;
            text-overflow: ellipsis;
            padding: 2px 12px;
            line-height: 20px;
            font-size: @font-size-caption-2;
            color: @color-basic-900;
          }
        }
      }

      &.expanded {
        .title {
          &:after {
            background-image: @select-arrow-active-icon;
          }
        }
      }
    }
  }
}
